<template>
    <div style="padding-top: 1%">
        <Card :bordered="false" style="margin-left: 16%;margin-right: 1%" dis-hover>
            <p slot="title" style="font-size: larger;font-weight: bolder">
                <router-link to="/index/article">
                    <Icon type="ios-arrow-back"/>
                    返回
                </router-link>
                <span
                        style="margin-left: 5%">博客管理 / 博客详情</span></p>
            <div>
                <!--标题-->
                <div style="display: flex;justify-content: center"><h2>{{article.atitle}}</h2></div>
                <!--相关信息-->
                <div style="display: flex;justify-content: center;margin-top: 5px">
                    <div>发布时间：{{article.aCreatetime}}</div>
                    <div style="margin-left: 4%;margin-right: 4%">类别：{{article.cate.cateName}}</div>
                    <div>作者：{{article.user.unickname}}</div>
                </div>
                <div style="display: flex;justify-content: center;margin-top: 5px;margin-bottom: 1%">
                    <div>喜欢：{{article.alikecount}}</div>
                    <div style="margin-left: 4%;margin-right: 4%">浏览量：{{article.avisitcount}}</div>
                    <div>状态：{{article.astatus===true?'发布':'已删除'}}</div>
                </div>
            </div>
            <div>
                <mavon-editor style="height: 430px" v-model="article.acontent" :subfield="false"
                              defaultOpen="preview" :boxShadow="false"
                              :editable="false" :toolbarsFlag="false"></mavon-editor>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // 文章信息
        article: {
          atitle: '',
          aCreatetime: '',
          cate: {
            cateName: ''
          },
          user: {
            unickname: ''
          },
          alikecount: '',
          avisitcount: '',
          astatus: '',
          acontent: ''
        },
        // 文章id
        id: 0
      }
    },
    mounted() {
      this.id = this.$route.params.id
      this.getArticle()
    },
    methods: {
      getArticle() {
        this.$http.get(`article/${this.id}`).then(res => {
          res = res.data
          if (res.code === 0) {
            this.article = res.data
          } else {
            this.$Message.error('获取文章详情失败')
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
